<template>
<div class="container1">


  <div class="container">
    <div class="toptitle">
      <i @click="study"></i>
      <div class="title">图书配套</div>
      <i></i>
    </div>

    <div class="pic">
      <img src="../assets/img/banner5.jpg" alt="" />
    </div>

    <div class="tabs">
      <van-tabs v-model:active="active" swipeable>
        <van-tab :title="'四级'">
          <!-- 要循环的 -->
          <div class="all">
            <div class="book" v-for="(item,index) in forth" :key="index" @click="video(item)">
              <img :src="item.img" alt="" />

              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'六级'" class="all"> 
          <!-- 要循环的 -->
          <div class="all">
            <div class="book" v-for="(item,index) in sixth" :key="index" @click="video(item)">
              <img :src="item.img" alt="" />

              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'考研'" class="all">
          <!-- 要循环的 -->
          <div class="all">
            <div class="book" v-for="(item,index) in morestudy" :key="index" @click="video(item)">
              <img :src="item.img" alt="" />

              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'专四'" class="all">
          <!-- 要循环的 -->
          <div class="all">
            <div class="book" v-for="(item,index) in moreforth" :key="index" @click="video(item)">
              <img :src="item.img" alt="" />

              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'专八'" class="all">
          <!-- 要循环的 -->
          <div class="all">
            <div class="book" v-for="(item,index) in moresixth" :key="index" @click="video(item)">
              <img :src="item.img" alt="" />

              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>

</div>
</template>

<script>
import router from '@/router';
import { getBookShopData } from "../assets/api/home";
import { reactive, toRefs } from '@vue/reactivity';
export default {
  setup() {
    let data = reactive({
      arry:null,
      forth:null,
      sixth:null,
      morestudy:null,
      moreforth:null,
      moresixth:null
    })

    //要循环的
    let getShopFun = ()=>{
      getBookShopData().then((res)=>{
        data.arry = res.data.results.list
        //所有的
        // console.log(data.arry);
        data.arry.forEach(item => {
          item["show"] = false
        });
        //四级
        data.forth = data.arry.filter((item)=>{
          return item.title.includes("四级")
        })
        //六级
        data.sixth = data.arry.filter((item)=>{
          return item.title.includes("六级")
        })
        //考研
        data.morestudy = data.arry.filter((item)=>{
          return item.title.includes("考研")
        })
        //专四
        data.moreforth = data.arry.filter((item)=>{
          return item.title.includes("专四")
        })
        //专四
        data.moresixth = data.arry.filter((item)=>{
          return item.title.includes("专八")
        })

        
        
      })
    }
    getShopFun()

    //学习返回
    let study = () =>{
      router.push({
        path:"/study"
      })
    }
    //视频
    let video = (item) =>{
      console.log(item);
      router.push({
        path:"/video",
      })
      window.localStorage.setItem("datas",JSON.stringify(item))
    }

    return {
      getShopFun,
      video,
      study,
      ...toRefs(data)
    };
  },
};
</script>
<style lang="scss" scoped>
@import url(../assets/css/base.css);
.container1{
  height: 100vh;
  // background-image: linear-gradient(#ffff,rgb(243, 243, 243));
}
.container {
    padding: 0px 19px;
}
.toptitle {
  
  display: flex;
  justify-content: space-between;
  height: 48px;
  align-items: center;
  margin-top: 10px;
  i:nth-child(1) {
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../assets/img/back.png);
    background-size: 18px 18px;
  }
  i:nth-child(3) {
    display: block;
    width: 18px;
    height: 18px;
  }
  .title {
    color: #292933;
    font-weight: bold;
  }
}
.pic {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.tabs{
  margin-top: 5px;
}
.tabs .book {
  width: 95px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 3px 2px 8px 0px rgb(208, 208, 208);
  margin: 10px 8px 20px 8px;
  background-image: linear-gradient(#f6f6f8,#f4f4f4);
  img {
    width: 100%;
    border-radius: 5px;
  }
  .title{
    font-size: 13px;
    height: 37px;
    line-height: 37px;
    color: #58595d;
    width: 90%;
    overflow: hidden; // 溢出部分隐藏 
    white-space: nowrap; // 文字不换行
    text-overflow: ellipsis; // 显示省略号
  }
}
.all{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;

}
::v-deep .van-tabs__line{
  background-color: transparent;
}
::v-deep .van-tab--active{
  color: #0285e9;
  font-size: 14px;
  font-weight: bold;
}
::v-deep .van-tab--active::before{
  display: block;
  content: "";
  width: 17px;
  height: 17px;
  background-image: url(../assets/img/icon_book_checked.png);
  background-size: 17px 17px;
}
::v-deep .van-tabs__nav--line{
  background-color: transparent;
}
::v-deep .van-tab::after{
  display: block;
  content: "";
  width: 1px;
  height: 15px;
  background-color: #ecedf1;
  position: absolute;
  right: 0px;
}
::v-deep .van-tab:nth-child(5):after{
  background-color: transparent;
}
</style>